var slideBg, slideBlock, pagex = 0

Page({
  /**
   * 页面的初始数据
   */
  data: {
    width: 400,
    height: 400,
    src: '',
    top: 0,
    left: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    // 获取弹出sku层实例(获取可能稍微有些慢)
    // slideBg = wx.createCanvasContext("slideBg")
    // slideBlock = wx.createCanvasContext("slideBlock")

    // slideBg.drawImage("../../assets/Snipaste_2019-09-17_16-46-01.png", 0, 0, 200, 200)
    // slideBg.draw()

    //生成指定区间的随机数
    const random = (min, max) => {
      return Math.floor(Math.random() * (max - min + 1) + min)
    }
    //x: 254, y: 109
    let mx = random(20, 190),
      bx = random(20, 190),
      y = random(10, 190)

    this.slider = {
      mx,
      bx
    }

    this.draw(mx, bx, y)
  },

  touchStart: function(e) {
    console.log(e, '开始')
    pagex = e.touches[0].pageX
    console.log(pagex, '开始')
  },

  move: function(e) {
    console.log('pagex', pagex)
    console.log(e.touches[0].pageX, 'e.touches[0].pageX')
    var left = e.touches[0].pageX - pagex + this.data.left
    pagex = e.touches[0].pageX

    if (left > 0 && left < 150) {
      this.setData({
        left: left
      })
    }
  },
  end: function(e) {
    console.log(e, '结束')
  },
  draw(mx = 190, bx = 20, y = 50) {
    // let mainDom = slideBg = wx.createCanvasContext("slideBg")
    let bg = wx.createCanvasContext("slideBg")

    let width = 200
    let height = 200

    // let blockDom = document.querySelector("#sliderBlock")
    let block = wx.createCanvasContext("slideBlock")
    //重新赋值，让canvas进行重新绘制
    // block.height = 400
    // bg.height = 400

    let imgsrc = "../../assets/Snipaste_2019-09-17_16-46-01.png"

    let mainxy = {
      x: mx,
      y: y,
      r: 9
    }
    let blockxy = {
      x: 50.5,
      y: 100.5,
      r: 9,
      w: 40
    }
    let blockxy2 = {
      x: 50.5 * 2,
      y: 100.5 * 2,
      r: 9 * 2,
      w: 80
    }

    // block.scale(0.5, 0.5);

    this.drawBlock(bg, blockxy, "fill")
    // this.drawBlock(block, blockxy2, "clip")

    var _this = this
    // block.scale(0.5, 0.5);
    bg.drawImage(imgsrc, 0, 0, width, height)
    this.drawBlock(block, blockxy2, "clip")
    block.drawImage(imgsrc, 0, 0, width * 2, height * 2)
    bg.draw()

    var _this = this

    this.setData({
      top: blockxy.y
    })


    block.draw(true, () => {
      wx.canvasToTempFilePath({
        x: blockxy2.x,
        y: blockxy2.y,
        width: 110,
        height: 100,
        destWidth: 110,
        destHeight: 100,
        canvasId: 'slideBlock',
        success(res) {
          console.log(res.tempFilePath)
          _this.setData({
            src: res.tempFilePath
          })
        },
        fail: res => {
          console.log(res, 'fail')
        }
      })
    })




    // setTimeout(() => {
    //   wx.canvasGetImageData({
    //     canvasId: 'slideBlock',
    //     x: blockxy.x,
    //     y: blockxy.y,
    //     width: 55,
    //     height: 50,
    //     success(res) {

    //       console.log(res)

    //       block.clearRect(0, 0, 400, 400)
    //       block.draw()

    //       wx.canvasPutImageData({
    //         canvasId: 'slideBlock',
    //         x: 0,
    //         y: blockxy.y,
    //         width: 55,
    //         height: 50,
    //         data: res.data,
    //         success(success) {
    //           console.log('成功')
    //           // _this.setData({
    //           //   width: 55
    //           // })
    //         },
    //         fail(fail) {
    //           console.log(fail)
    //         }
    //       })
    //       // console.log(res.width) // 100
    //       // console.log(res.height) // 100
    //       // console.log(res.data instanceof Uint8ClampedArray) // true
    //       // console.log(res.data.length) // 100 * 100 * 4
    //     },
    //     fail(res) {
    //       console.log(res, 'fail')
    //       console.log(mainxy)
    //     }
    //   })
    // }, 1000)

  },

  //绘制拼图
  drawBlock(ctx, xy = {
    x: 254,
    y: 109,
    r: 9,
    w: 40
  }, type) {

    let x = xy.x,
      y = xy.y,
      r = xy.r,
      w = xy.w
    let PI = Math.PI
    //绘制
    ctx.beginPath()
    //this.data.left+left
    ctx.moveTo(x, y)
    //top
    ctx.arc(x + (w + 5) / 2, y, r, -PI, 0, true)
    ctx.lineTo(x + w + 5, y)
    //right
    ctx.arc(x + w + 5, y + w / 2, r, 1.5 * PI, 0.5 * PI, false)
    ctx.lineTo(x + w + 5, y + w)
    //bottom
    ctx.arc(x + (w + 5) / 2, y + w, r, 0, PI, false)
    ctx.lineTo(x, y + w)
    ctx.arc(x, y + w / 2, r, 0.5 * PI, 1.5 * PI, true)
    ctx.lineTo(x, y)
    //修饰，没有会看不出效果
    ctx.lineWidth = 1
    // if (type != 'clip'){
    // }else{
    //   ctx.lineWidth = 0
    // }
    ctx.fillStyle = "rgba(255, 255, 255, 0.5)"
    ctx.strokeStyle = "rgba(255, 255, 255, 0.5)"
    ctx.stroke()
    ctx[type]()
    // ctx.clip()
    ctx.globalCompositeOperation = "xor"

    // 重置画笔颜色
    ctx.fillStyle = "rgba(255, 255, 255, 1)"
    ctx.strokeStyle = "rgba(255, 255, 255, 1)"
  }
})